<template>
  <view @click="onClick" class="flex flex-col flex-col-center-center pa-32">
    <tm-translate :eventPenetrationEnabled="true" name="zoom" :delay="300">
      <tm-sheet
        :dark="props.dark"
        :followTheme="false"
        :followDark="props.followDark"
        _class="flex-center flex-row rounded"
        :width="props.size"
        :height="props.size"
        :round="25"
        :color="icon_color"
        :text="props.text"
      >
        <tm-icon
          _style="line-height:normal"
          :dark="props.dark"
          :followDark="props.followDark"
          :fontSize="80"
          :name="icon_rp"
        ></tm-icon>
      </tm-sheet>
    </tm-translate>
    <view :eventPenetrationEnabled="true" class="flex flex-col flex-center pb-10">
      <tm-text
        :dark="props.dark"
        :followDark="props.followDark"
        _class="text-weight-b"
        :fontSize="34"
        :label="icon_title"
      ></tm-text>
    </view>
    <view :eventPenetrationEnabled="true" class="flex flex-col flex-center pb-24">
      <tm-text
        :dark="props.dark"
        :followDark="props.followDark"
        _class="opacity-6 "
        :fontSize="24"
        :label="icon_subtitle"
      ></tm-text>
    </view>
    <view
      :eventPenetrationEnabled="true"
      v-if="props.showBtn"
      hover-class="opacity-6"
      class="flex flex-col flex-center"
    >
      <slot name="default">
        <tm-sheet
          :padding="[0, 0]"
          @click="emits('click', $event)"
          :height="80"
          :dark="dark"
          :followTheme="props.followTheme"
          :followDark="props.followDark"
          :shadow="3"
          linear="right"
          :color="icon_color"
          _style="cursor: pointer;"
          :round="4"
          :width="420"
          _class="flex-center"
          :margin="[0, 32]"
        >
          <tm-text
            :userInteractionEnabled="false"
            :dark="props.dark"
            _class="text-size-n"
            :followDark="props.followDark"
            :label="btnText"
          ></tm-text>
        </tm-sheet>
      </slot>
    </view>
  </view>
</template>

<script lang="ts" setup>
/**
 * 结果页
 * @description 主要用来显示页面当前状态，比如空，出错等。
 */
import tmSheet from "../tm-sheet/tm-sheet.vue";
import tmText from "../tm-text/tm-text.vue";
import tmIcon from "../tm-icon/tm-icon.vue";
import tmTranslate from "../tm-translate/tm-translate.vue";
import { computed } from "vue";
//click为按钮事件，resultClick为整个组件点击事件。
const emits = defineEmits(["click", "resultClick"]);
const props = defineProps({
  // empty,error,success,warning,lock,network
  status: {
    type: String,
    default: "empty",
  },
  icon: {
    type: String,
    default: "",
  },
  color: {
    type: String,
    default: "primary",
  },
  title: {
    type: String,
    default: "",
  },
  subTitle: {
    type: String,
    default: "",
  },
  btnText: {
    type: String,
    default: "确认",
  },
  //是否跟随全局主题的变换而变换
  followTheme: {
    type: [Boolean, String],
    default: true,
  },
  followDark: {
    type: [Boolean, String],
    default: true,
  },
  //暗黑
  dark: {
    type: [Boolean, String],
    default: false,
  },
  //是否显示底部的操作按钮。
  showBtn: {
    type: Boolean,
    default: true,
  },
  //是否禁用整个组件的点击事件。
  clickDisabled: {
    type: Boolean,
    default: true,
  },
  text: {
    type: Boolean,
    default: true,
  },
  size: {
    type: Number,
    default: 140,
  },
});
const statusData = {
  empty: {
    icon: "tmicon-shiliangzhinengduixiang-",
    title: "数据空",
    subTitle: "下拉刷新",
    color: "primary",
  },
  error: {
    icon: "tmicon-times",
    title: "错误",
    subTitle: "请根据指示操作",
    color: "red",
  },
  success: {
    icon: "tmicon-check",
    title: "操作正确",
    subTitle: "请稍候",
    color: "green",
  },
  warning: {
    icon: "tmicon-exclamation-circle",
    title: "异常",
    subTitle: "请根据指示操作",
    color: "orange",
  },
  lock: {
    icon: "tmicon-ios-unlock",
    title: "授权提醒",
    subTitle: "需要你的授权进一步操作。",
    color: "blue",
  },
  network: {
    icon: "tmicon-wifi-off",
    title: "网络错误",
    subTitle: "请关注你的网络情况",
    color: "blue",
  },
};
const icon_rp = computed(() => {
  if (props.icon) return props.icon;
  if (!props.status) return "";
  return statusData[props.status].icon || "";
});
const icon_title = computed(() => {
  if (props.title) return props.title;
  if (!props.status) return "";
  return statusData[props.status].title || "";
});
const icon_subtitle = computed(() => {
  if (props.subTitle) return props.subTitle;
  if (!props.status) return "";
  return statusData[props.status].subTitle || "";
});
const icon_color = computed(() => {
  if (props.color) return props.color;
  if (!props.status) return "";
  return statusData[props.status].color || "";
});
const onClick = (e: Event) => {
  if (props.clickDisabled) return;
  emits("resultClick", e);
};
</script>

<style scoped></style>
